<template>
  <footer class="footer" v-if="footerData1">
    <div class="container">
      <div class="col-md-12 col-sm-12">
        <div class="footer-top">
          <span class="logo"><a href="/">Welons Group</a></span>
          <span class="contact" v-if="footerData1.contactData">
            <span>
              <label><i class="fa fa-phone" aria-hidden="true"></i></label>
              {{ void (telList = footerData1.contactData.telList) }}
              {{ telList[0].tel }}
            </span>
            <span>
              <label><i class="fa fa-envelope-o" aria-hidden="true"></i></label>
              {{ void (emailList = footerData1.contactData.emailList) }}
              <a :href="`mailto:${emailList[0].email}`">
                {{ emailList[0].email }}
              </a>
            </span>
          </span>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="about-us">
            <div class="widget">
              <img
                :src="require('@/assets/image/welons-logo.png')"
                class="logo w-25"
                alt="..."
              />
              <!-- <h4 class="widget-title">Address</h4> -->
              <p class="description" v-if="footerData1.contactData">
                {{ void (addressList = footerData1.contactData.addressList) }}
                {{ addressList[0].contactAddress.address }},
                <br />
                {{ addressList[0].contactAddress.town }},
                {{ addressList[0].contactAddress.district }}
                {{ addressList[0].contactAddress.province }}
                <br />
              </p>
              <br />
              <p class="description" v-if="footerData1.contactData">
                {{ void (addressList = footerData1.contactData.addressList) }}
                {{ addressList[1].contactAddress.address }},
                <br />
                {{ addressList[1].contactAddress.town }},
                {{ addressList[1].contactAddress.district }},
                {{ addressList[1].contactAddress.city }},
                <br />
                {{ addressList[1].contactAddress.province }},
                {{ addressList[1].contactAddress.country }}
                <br />
              </p>
              <!-- <h4 class="widget-title">Tel.</h4>
              <p class="description">
                {{ void (telList = footerData.contactData.telList) }}
                <template v-for="(item, index) in telList" :key="index">
                  {{ item.tel }} <br />
                </template>
              </p>
              <h4 class="widget-title">Email</h4>
              <p class="description">
                {{ void (emailList = footerData.contactData.emailList) }}
                <template v-for="(item, index) in emailList" :key="index">
                  {{ item.email }} <br />
                </template>
              </p> -->
            </div>
            <!-- <ul class="social-icons">
              <template
                v-for="network in sharing.networks"
                :key="network.network"
              >
                <li :style="{ backgroundColor: network.color }">
                  <ShareNetwork
                    :network="network.network"
                    :url="sharing.url"
                    :title="sharing.title"
                    :description="sharing.description"
                    :quote="sharing.quote"
                    :hashtags="sharing.hashtags"
                    :twitterUser="sharing.twitterUser"
                  >
                    <i :class="network.icon"></i>
                  </ShareNetwork>
                </li>
              </template>
            </ul> 
            -->
            <ul class="follow-list">
              <template v-for="(item, index) in followList" :key="index">
                <li :style="{ backgroundColor: item.color }">
                  <a :href="item.url">
                    <i :class="item.icon"></i>
                  </a>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="widget">
            <!-- <h4 class="widget-title">Navigation</h4> -->
            <ul class="menu-footer-navigation">
              <template v-for="(item, index) in menuData" :key="index">
                <li class="menu-item">
                  <a :href="item.url">{{ item.title }}</a>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <div class="col-md-4">
          <div class="newsletter widget">
            <!-- <h4 class="widget-title">Newsletter</h4> -->
            <p>Enter your email address for getting daily news letter</p>
            <form action="">
              <input type="email" placeholder="Email*" />
              <button class="fa fa-send" type="button"></button>
            </form>
          </div>
        </div>
        <div class="col-md-12 col-sm-12 visible-md visible-lg">
          <div class="copyright d-flex justify-content-center">
            {{ footerData1.copyright }}
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import BaseInfo from "@/datas/BaseInfo.json";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "BaseFooter",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      menuData: BaseInfo.menuData,
      footerData: BaseInfo.footerData,
      footerData1: computed(() => proxy.$store.getters.footerData),
      //
      sharing: {
        url: window.location.href,
        title: "Welcome to Welons Group",
        description: "",
        quote: "",
        hashtags: "",
        twitterUser: "",
        networks: [
          {
            network: "facebook",
            name: "Facebook",
            icon: "fa fa-facebook",
            color: "#1877f2",
          },
          {
            network: "linkedin",
            name: "LinkedIn",
            icon: "fa fa-linkedin",
            color: "#007bb5",
          },
          {
            network: "twitter",
            name: "Twitter",
            icon: "fa fa-twitter",
            color: "#1da1f2",
          },
        ],
      },
      //
      followList: BaseInfo.followList,
      //
    });
    const refData = toRefs(data);
    onBeforeMount(() => {
      // console.log(data.footerData1.contactData.fullContactAddress);
    });
    onMounted(() => {});
    //
    const methods = {
      share(type) {
        console.log(type);
      },
    };
    //
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
.footer {
  padding: 50px 0 0 0;
  background: #2c323e;
  color: #fff;
  font-size: 1.125rem;

  .footer-top {
    margin-bottom: 15px;
    width: 100%;
    border-bottom: 1px rgba(255, 255, 255, 0.15) solid;
    padding: 10px 0;

    .logo {
      color: #fff;
      font-size: 1.5rem;
      font-weight: 700;
    }
    .contact {
      color: #fff;
      font-size: 1.25rem;
      margin-left: 40px;

      span {
        margin-left: 40px;
        label {
        }
      }
    }
  }

  .about-us .widget-title,
  .about-us p {
    line-height: 2rem;
    margin-bottom: 0;
  }

  .about-us {
    p.description {
      font-weight: 300;
    }

    .logo {
      margin-bottom: 15px;
    }
  }

  .widget-title {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 30px;
  }

  ul.follow-list {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;

    li a {
      display: block;
    }

    li {
      float: left;
      font-size: 1rem;
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      color: #fff;
      // border-radius: 100%;
      // margin-top: 35px;
      margin-right: 15px;
      // border: #fff 1px solid;
      border-radius: 100%;
    }
  }

  ul.menu-footer-navigation {
    margin-top: 5px;
    list-style-type: none;
    padding: 0;
    // margin: 0;

    li {
      margin-bottom: 20px;
      font-weight: 300;
      line-height: 1;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      color: #0accb9;
    }
  }

  .newsletter {
    p {
      font-weight: 300;
    }

    form {
      position: relative;
      margin-top: 30px;
    }

    input[type="email"] {
      border-radius: 30px;
      border-color: #414755;
      padding: 15px 20px;
      width: 100%;
      color: #2c323e;
    }

    button {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 30px;
      padding: 0 30px;
      -webkit-webkit-box-shadow: none;
      -moz-webkit-box-shadow: none;
      box-shadow: none;
    }
  }

  .copyright {
    width: 100%;
    border-top: 1px solid #414755;
    padding: 10px 0;
  }
}
</style>
